<template>
  <div>
    <div class="banner">
      <a-carousel autoplay>
        <div><img src="../assets/imgs/banner_10years.jpg" alt="十周年" /></div>
        <div>
          <img src="../assets/imgs/banner_dropdown.gif" alt="下拉刷新" />
        </div>
        <div><img src="../assets/imgs/banner_feikuai.jpg" alt="啡快" /></div>
      </a-carousel>
    </div>
    <div class="star"></div>
    <div class="product">
      <div class="core">
        <div class="feikuai" @click="$router.push({name:'FeiKuai'})">
          <!-- <p>在线点，到店取</p> -->
          <img src="../assets/imgs/core-feikuai.png" alt="啡快" />
        </div>
        <div class="zhuanxingsong">
          <!-- <p>外送到家</p> -->
          <img src="../assets/imgs/core-zhuanxingsong.png" alt="专星送" />
        </div>
      </div>
      <div class="activity">
        <div>
          <img src="../assets/imgs/activity-care.png" alt="心意" />
          <p>暖暖的心意</p>
        </div>
        <div>
          <img src="../assets/imgs/activity-welfare.png" alt="福利" />
          <p>星粉必备神卡</p>
        </div>
        <div>
          <img src="../assets/imgs/activity-welfare.png" alt="福利" />
          <p>羊城欢迎您</p>
        </div>
      </div>
      <div class="ad">
        <a-carousel autoplay>
          <div><img src="../assets/imgs/ad_10years.jpg" alt="十周年" /></div>
          <div>
            <img src="../assets/imgs/ad_zhuanxingsong.jpg" alt="下拉刷新" />
          </div>
          <div><img src="../assets/imgs/ad_feikuai.jpg" alt="啡快" /></div>
        </a-carousel>
      </div>
    </div>
    <div class="store" @click="$router.push({name:'City'})">
      <div>
        <b>查找门店</b>
        <p>带你发掘更多线下门店</p>
      </div>
      <img src="../assets/imgs/store-find.png" alt="门店">
    </div>
  </div>
</template>

<script>
export default {
  methods: {},
};
</script>
<style lang="scss" scoped>
.banner {
  .ant-carousel /deep/ .slick-slide {
    text-align: center;
    height: 230px;
    overflow: hidden;
  }
}

img {
  width: 100%;
  background-repeat: no-repeat;
}

.product {
  padding: $common-padding;
  .core {
    background: #fff;
    border-radius: $common-border-radius;
    padding: $common-padding;
    margin-bottom: $common-margin;
    display: flex;
    justify-content: center;
    .feikuai {
      border-right: 1px solid #ccc;
    }
  }
  .activity {
    background: #fff;
    border-radius: $common-border-radius;
    padding: $common-padding;
    margin-bottom: $common-margin;
    display: flex;
    justify-content: space-around;
    div {
      width: 6rem;
      p{
        text-align: center;
      }
    }
  }
  .ad {
    border-radius: 20px;
    img {
      border-radius: $common-border-radius;
    }
  }
}

.store{
  // margin-bottom:100px;
  width: 100%;
  height: 6rem;
  padding: $common-padding;
  display: flex;
  justify-content: space-between;
  b{
    font-size: 1.5rem;
  }
  img{
    width: 30%;
  }
}
</style>

